<template>
    <div class="width1200">
        <!-- 搜索栏 -->
        <div class="width750">
            <div class="search marginTop85">
            <el-row>
                <el-col :span="20">
                <div>
                    <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
                    <el-select v-model="select" slot="prepend" placeholder="请选择">
                        <el-option label="餐厅名" value="1"></el-option>
                        <el-option label="订单号" value="2"></el-option>
                        <el-option label="用户电话" value="3"></el-option>
                    </el-select>
                    </el-input>
                </div>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" size="medium">能源存储</el-button>
                </el-col>
            </el-row>
            <el-row class="marginTop16">
                <span class="spanClass">第三方公司的</span>
                <span class="spanClass">第三方公司的</span>
                <span class="spanClass">第三方公司的</span>
                <span class="spanClass">第三方公司的</span>
                <span class="spanClass">第三方公司的</span>
                <span class="spanClass">第三方公司的</span>
            </el-row>
            </div>
        </div>
        <!-- 筛选栏 -->
        <el-row class="marginTop34 border">
            <el-col :span="24">
                <el-row class="lineHeight46 boderBottom paddingLeft15">
                    <el-col :span="2" class="color333">专业类型：</el-col>
                    <el-col :span="22">
                        <span class="searchWorld">变配电</span>
                        <span class="searchWorld">储能</span>
                        <span class="searchWorld">光伏</span>
                        <span class="searchWorld">智能楼宇</span>
                    </el-col>
                </el-row>
                <el-row class="lineHeight46 boderBottom paddingLeft15">
                    <el-col :span="2" class="color333">专业类型：</el-col>
                    <el-col :span="22">
                        <span class="searchWorld">变配电</span>
                        <span class="searchWorld">变配电</span>
                        <span class="searchWorld">变配电</span>
                        <span class="searchWorld">变配电</span>
                        <span class="searchWorld">变配电</span>
                        <span class="searchWorld">变配电</span>
                    </el-col>
                </el-row>
                <el-row class="lineHeight46 paddingLeft15 bgF6F6F6">
                    <el-col :span="12">
                        <el-button type="default" size="mini">综合排序<i class="el-icon-caret-top"></i></el-button>
                        <el-button type="default" size="mini">最新<i class="el-icon-caret-top"></i></el-button>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <!-- 列表 -->
        <el-row class="marginTop38" :gutter="20">
            <el-col :span="8">
                <div class="size384a360 border">
                    <div class="imgContains size360a175">
                        <img src="../../assets/images/checkMoreList.png" alt="">
                    </div>
                    <div class="itemName color333">汉得一步数字化工厂云</div>
                    <div class="itemContent color666">即时上线操作简便、按需收费...</div>
                    <div class="itemPrice colorF15938"><small>￥</small>3600起</div>
                    <div>
                        <el-tag size="mini" color="#00c1de" class="colorWhite">能源存储</el-tag>
                    </div>
                    <el-row class="lineHeight40 color666 fontSize14 marginTop10 bgFd">
                        <el-col :span="1">
                            <div class="size14 imgContains marginTop10">
                                <img src="../../assets/images/smllLogo.png" alt="">
                            </div>
                        </el-col>
                        <el-col :span="22" class="color666 fontSize14 paddingLeft15">微传智能科技有限公司</el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="size384a360 border">
                    <div class="imgContains size360a175">
                        <img src="../../assets/images/checkMoreList.png" alt="">
                    </div>
                    <div class="itemName color333">汉得一步数字化工厂云</div>
                    <div class="itemContent color666">即时上线操作简便、按需收费...</div>
                    <div class="itemPrice colorF15938"><small>￥</small>3600起</div>
                    <div>
                        <el-tag size="mini" color="#00c1de" class="colorWhite">能源存储</el-tag>
                    </div>
                    <el-row class="lineHeight40 color666 fontSize14 marginTop10 bgFd">
                        <el-col :span="1">
                            <div class="size14 imgContains marginTop10">
                                <img src="../../assets/images/smllLogo.png" alt="">
                            </div>
                        </el-col>
                        <el-col :span="22" class="color666 fontSize14 paddingLeft15">微传智能科技有限公司</el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="size384a360 border">
                    <div class="imgContains size360a175">
                        <img src="../../assets/images/checkMoreList.png" alt="">
                    </div>
                    <div class="itemName color333">汉得一步数字化工厂云</div>
                    <div class="itemContent color666">即时上线操作简便、按需收费...</div>
                    <div class="itemPrice colorF15938"><small>￥</small>3600起</div>
                    <div>
                        <el-tag size="mini" color="#00c1de" class="colorWhite">能源存储</el-tag>
                    </div>
                    <el-row class="lineHeight40 color666 fontSize14 marginTop10 bgFd">
                        <el-col :span="1">
                            <div class="size14 imgContains marginTop10">
                                <img src="../../assets/images/smllLogo.png" alt="">
                            </div>
                        </el-col>
                        <el-col :span="22" class="color666 fontSize14 paddingLeft15">微传智能科技有限公司</el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <!-- 分页 -->
    </div>
</template>
<style>
.default-layout .layout-container{
    background: #ffffff !important;
}
</style>

<style scoped>
.itemPrice{
    font-size:18px;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(241,89,56,1);
    line-height:24px;
    margin-top:5px;
}
.itemContent{
    font-size:14px;
    font-family:SourceHanSansCN-Light;
    font-weight:300;
    color:rgba(102,102,102,1);
    line-height:24px;
}
.itemName{
    padding-top:20px;
    padding-bottom:12px;
    font-size:16px;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
}
.spanClass{
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:17px;
    opacity:0.6;
    font-size: 13px;
    padding: 0 6px;
    cursor: pointer;
    display: inline-block;
}
.searchWorld{
    color:#666666;
    display:inline-block;
    font-size:14px;
    padding:0 6px;
    cursor: pointer;
}
.searchWorld::hover,
.searchWorld::visited{
    color:'#138782';
}
</style>

<script>
export default {
    name: "CheckMore",
    data(){
        return{
            search:'',
            select:'',
        }
    }
}
</script>
